<template>
    <view>
      <div class="container">
      <div style="height: 10px"></div>
      <view class="all">
        <!-- 头部选项卡 -->
        <view class="head-nav">
          <view :class="navIndex == 0 ? 'activite' : ''" @click="checkIndex(0)">全部任务</view>
          <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)">进行中</view>
          <view :class="navIndex == 2 ? 'activite' : ''" @click="checkIndex(2)">未开始</view>
        </view>
        <div v-show="list.length == 0">
      <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
      </u-empty>
    </div>
        <!-- 内容切换 -->
        <view class="content">
          <div class="card" v-for="item in list" @click="taskDetail(item)">
            <div style="height: 10px"></div>
            <div class="card-top">
              <div style=" text-align: center">{{ item.requirementNo }}</div>
              <div style=" text-align: center">{{ item.createTime }}</div>
              <div :class="item.workOrderType==1?'right':'right1'" style="width: 20%; text-align: center;border-radius: 4px;">
                {{ item.workOrderType == 1 ? "手工单" : "自派单" }}
              </div>
            </div>
            <div style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div class="items">
              <div>实验员：{{ item.experimenter }}</div>
              <div>电话：{{ item.experimenterPhone }}</div>
            </div>
            <div style="height: 10px"></div>
            <div class="items">
              <div>实验助手：{{ item.experimentAssistant }}</div>
              <div>电话：{{ item.experimentAssistantPhone }}</div>
            </div>
            <div style="height: 10px"></div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div style="margin-left: 5%;font-size: 14px;">
              <div>取样点：{{ item.vehicleOrganicType }}</div>
              <div style="height: 10px"></div>
              <div>实验对象：{{ item.experimentSubject }}</div>
              <div style="height: 10px"></div>
              <div>实验参数：{{ item.licenseNumber }}</div>
              <div style="height: 10px"></div>
              <div>派单人：{{ item.createBy }}</div>
              <div style="height: 10px"></div>
            </div>
            <u-line color="#83AF92"></u-line>
            <div style="height: 10px"></div>
            <div :class="item.feedbackState == 1 ? 'status' : 'status1'">
             {{ item.feedbackState==0?'未反馈':'已反馈' }}
             {{ item.experimentState==0?'未开始':item.experimentState==1?'进行中':item.experimentState==2?"已完成":item.feedbackState==0?'未反馈':item.feedbackState==1?
             '已完成':'' }}
          </div>
            <div style="height: 15px"></div>
          </div>
          <div style="height: 10px;"></div>
        </view>
      </view>
    </div>
    </view>
  </template>
  <script>
  import { myTaskList } from '../api/api';
  export default {
    data() {
      return {
        navIndex: 0,
        list: [],
        list1: [],
        currentPage: '',
        role: '',
        experimentState:''
      };
    },
    methods: {
      checkIndex(index) {
        this.navIndex = index;
        console.log(index,'index');
        if(index==1){
          this.experimentState = 1;
          this.myTask();
        }else if(index==2){
          this.experimentState = 0;
          this.myTask();
        }else{
          this.experimentState = '';
          this.myTask();
        }
      },
      taskDetail(item){
        uni.setStorageSync('expertTaskDetail', item)
          uni.navigateTo({ url: '/pagesExpert/index/questDetail?flag=my' })
      },
      myTask(){
        myTaskList({experimentState:this.experimentState}).then(res=>{
          console.log(res.data,'列表');
          if(res.data.code==200){
            this.list = res.data.data;
          }
        })
      }
    },
    onLoad() {},
    onShow() {
        this.myTask();
        this.role = uni.getStorageSync('userInfo').remark;
        var pages = getCurrentPages(); 
        let currentPageRoute = pages[pages.length - 1].route;
        // 根据当前页面路径设置currentPage
        this.currentPage = currentPageRoute;
        console.log(this.currentPage);
      },
  };
  </script>
  <style lang="scss">
  .container {
    height: 100vh;
    width: 100vw;
    background: #e3ede2;
    color: #1a512c;
    overflow-y: scroll;
  }
  .head-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .activite {
    border-bottom: 2px solid #1a512c;
  }
  .card {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    background: #b9e2c7;
    .card-top {
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 90%;
      margin-left: 5%;
    }
  }
  .items {
    display: flex;
    align-items: center;
    width: 90%;
    margin-left: 5%;
    justify-content: space-between;
    font-size: 14px;
  }
  .table {
    width: 90%;
    margin-left: 5%;
  }
  .status {
    color: #fff;
    background: #1b9c46;
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 3px;
  }
  .status1 {
    color: #1a512c;
    background: #FDBD18;
    width: 90%;
    margin-left: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    border-radius: 3px;
  }
  .right{
  background: #FDBD18;
  color: #fff;
  
  }
  .right1{
  background: #50AB18;
  color: #fff;
  }
  </style>
  